<template>
  <div>
    <el-table v-loading="loading" :data="tableData" border max-height="600px">
      <el-table-column property="date" label="启用" width="100" align="center">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status" active-color="#13ce66" inactive-color="#ff4949" :active-value="1" :inactive-value="0" @change="updateStatus(scope.row)" />
        </template>
      </el-table-column>
      <el-table-column property="code" label="字段名称" align="center" />
      <el-table-column property="title" label="字段描述" align="center" />
      <el-table-column property="listShow" label="列表控制" align="center" width="100">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.listShow" :checked="scope.row.listShow" :disabled="scope.row.disabled" />
        </template>
      </el-table-column>
      <el-table-column property="formShow" label="表单控制" align="center" width="100">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.formShow" :checked="scope.row.formShow" :disabled="scope.row.disabled" />
        </template>
      </el-table-column>
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitData">保 存</el-button>
    </div>
  </div>
</template>

<script>
//
import {
  findFieldByHeadId,
  saveAutoPage
} from '@/api/system/desform/onlineForm/onlCgformHead'
export default {
  name: 'OnlCgformAutoPage',
  props: {
    dataId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      tableData: [],
      loading: false,
      queryId: ''
    }
  },
  created() {
    // this.getFields()
  },
  methods: {
    getFields(id) {
      this.loading = true
      this.queryId = id
      findFieldByHeadId(id).then(res => {
        res.data.forEach(element => {
          element['disabled'] = !element.status
          // element['isShowList'] = element.isShowList || 1
          // element['isShowForm'] = element.isShowForm || 1
        })
        this.tableData = res.data
        this.loading = false
      })
    },
    updateStatus(row) {
      if (row.status) {
        row.disabled = false
        row.formShow = true
        row.listShow = true
      } else {
        row.formShow = false
        row.listShow = false
        row.disabled = true
      }
    },
    submitData() {
      saveAutoPage(this.tableData).then(res => {
        if (res.code === 200) {
          this.getFields(this.queryId)
          this.$message({
            message: '操作成功！',
            type: 'success'
          })
        }
      })
    }
  }
}
</script>

<style>

</style>
